import React, { useEffect } from 'react';
import echarts from 'echarts';
const mergeOptions = require('merge-options');
import useEchart from '../../hooks/useEchart';
import cs from './common.css';
import chalk from './theme/chalk';

const Color = require('color');
const dayjs = require('dayjs');
require('echarts/lib/chart/line');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/axisPointer');
// require("echarts/lib/component/markPoint");
// require("echarts/lib/component/markLine");
// require("echarts/lib/component/markArea");

const logCountInfo = [
  { time: 1596537026000, logCount: 33769, normal: true },
  { time: 1596620386000, logCount: 31440, normal: true },
  { time: 1596620787000, logCount: 30878, normal: true },
  { time: 1596784884000, logCount: 30030, normal: true },
  { time: 1598327378000, logCount: 29066, normal: true },
  { time: 1598327425000, logCount: 31440, normal: true },
  { time: 1598930383000, logCount: 33488, normal: true },
  { time: 1598930465000, logCount: 31440, normal: true },
  { time: 1598930535000, logCount: 21001, normal: true },
];

const theme = {
  primaryColor: '#108ee9', // 全局主色
};

const option = ({
  title: {
    show: true,
    text: '日志量时间变化图',
    top: 'top',
    left: 'center',
    textStyle: {
      normal: {
        color: 'red',
      },
    },
  },
  tooltip: {
    // show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  grid: {
    left: '10%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    data: logCountInfo.map(v => new Date(v.time)),
    type: 'category',
    name: '采集时间',
    nameRotate: 30,
    tooltip: {
      show: true,
      trigger: 'axis',
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      showMinLabel: true,
      showMaxLabel: true,
      boundaryGap: false,
      splitLine: {
        show: true,
      },
      interval: 0, // 强制显示所有标签
      formatter: value => dayjs(value).format('H:mm'),
    },
  },
  yAxis: {
    type: 'value',
    name: '单位(万) 间隔：5min',
  },
  series: [
    {
      name: '日志量统计',
      type: 'line',
      data: logCountInfo.map(v => v.logCount),
      symbol: 'triangle',
      smooth: true,
      lineStyle: {
        normal: {
          width: 2,
          color: theme.primaryColor,
        },
      },
      areaStyle: {
        normal: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: Color(theme.primaryColor)
                  .fade(0.2)
                  .string(),
              },
              {
                offset: 1,
                color: Color(theme.primaryColor)
                  .fade(0.9)
                  .string(),
              },
            ],
          },
        },
      },
    },
  ],
});

function makeThemeOption(theme) {
  return {
    textStyle: {
      color: theme.theme.titleColor,
    }
  }
}

// 使用echarts theme mergeOption 来生效文字颜色配置
echarts.registerTheme('chalk', chalk.theme);
const chalkThemeOption = makeThemeOption(chalk);

/*
- 线条是 smooth 的
- y 轴说明，间隔具体值取自
- 线条下部是透明度渐变
- x 轴 label 时间转换格式
- hover 提示
*/
export default function Line() {
  const [refChart, onChartMount] = useEchart('chalk');
  useEffect(() => {
    const mergedOption = mergeOptions(option, chalkThemeOption);
    refChart.current.setOption(mergedOption)
  }, [refChart]);
  return (
    <div>
      <h1>Page line area logCountInfo using chalk theme</h1>
      <div ref={onChartMount} className={cs.chart}></div>
    </div>
  );
}
